<template>
  <div id="dialog">
    <div id="dialog-modal" title="提示">
      <p>请选择数据录入方式：</p>
    </div>
    <div id="data-input-dialog" title="请输入数据（键值对）：">
      <inputer :fatherDialog="inputDialog"></inputer>
    </div>
  </div>
</template>

<script>
import 'jquery-ui/ui/widgets/dialog';
import inputer from '../components/DataInputer';

let _this;

export default {
  name: 'Dialog',
  data() {
    return {
      inputDialog: {}
    }
  },
  methods: {
    autoInput(father) {
      let title = '产品销售情况';
      let dataAxis = ['电视机', '电冰箱', '笔记本电脑', '台式电脑', '空调', '风扇', '打印机', '烤箱'];
      let data = [569, 907, 1876, 1089, 1271, 1512, 430, 788];
      this.$store.commit('init', {
        dataAxis,
        data,
        title
      });
      $(father).dialog('close');
      sessionStorage.setItem('loaded',1);
      this.$router.push('bar');
    },
    manualInput(father) {
      $('#data-input-dialog').dialog({
        width: 600,
        height: 600,
        resizable: false,
        open: function (event, ui) {
          _this.inputDialog = this;
          $(".ui-dialog-titlebar-close", $(this).parent()).hide();
        }
      });
      $(father).dialog("close");
    },
  },
  mounted() {
    _this = this;
    $(function() {
      $("#dialog-modal").dialog({
        height: 250,
        modal: true,
        resizable:false,
        buttons: {
          "测试数据": function() {
            _this.autoInput(this);
          },
          "手动输入": function() {
            _this.manualInput(this);
          }
        },
        open: function (event, ui) {
          $(".ui-dialog-titlebar-close", $(this).parent()).hide();
        }
      });
    });
  },
  components: {
    inputer
  }
}
</script>

<style>
  #dialog-modal {
    display: none;
  }
  #data-input-dialog {
    display: none;
  }
</style>